<template>
    <div class="knowledge-container">
        <div class="knowledge-LeftNav">
            <div class="knowledge-LeftNav-TopBar">
                <a-button type="default" @click="router.push('/dashboard')">
                  <LeftOutlined style="position: absolute; right:12px;top:12px;"/>
                </a-button>
                <img style="position: absolute; left:56px;top:15px;" src="../../assets/CourseManageView/inform.svg" alt="SVG Image"/>
                <p>数据科学导论</p>
            </div>
            <div class="knowledge-LeftNav-Management">
                <div class="knowledge-LeftNav-Management-Title">课程管理</div>
                <div class="knowledge-LeftNav-Management-Nav">
                    <a-menu v-model:selectedKeys="current" mode="vertical" :items="items" />
                </div>                
            </div>
        </div>
        <div class="knowledge-Content">
            
            <div class="knowledge-Q1">
                <a-button type="text" @click="Q1Note">什么是知识库</a-button>
            </div>
            <a-divider type="vertical" style="position: absolute;left: 150px;top: 25px;height: 21.262px;background-color: #BFBFBF;"/>
            <a-button type="text" style="border-radius: 12px;border:none;width: 138px;height:40px;position: absolute; top:16px; left:298px;" @click="Q2Note">我的文件如何存储</a-button>
            <div class="knowledge-Upload">
              <div class="knowledge-File">
                  <a-upload 
                  v-model:file-list="fileList">
                  
                    <a-button type="primary">上传知识库文件</a-button>
                  
                  </a-upload>
              </div>
            </div>
            
        </div>
        <div class="Agent-Wrap">
          <AgentChatFrame />  
        </div>
    </div>
</template>

<script lang="js" setup>
// @ts-ignore
import AgentChatFrame from '../../components/AgentChatFrame.vue';
import { LeftOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { h, ref, onMounted} from 'vue';

import api from '../../api/index';

import { message, Button, Modal } from 'ant-design-vue';
import axios from 'axios';
import { useRouter } from 'vue-router'

const router = useRouter()
import { useRoute } from 'vue-router';

const route = useRoute();
const courseNumber = route.params.course_number;

const current = ref(["knowledge"]);
const items = ref([
  {
    key: "CourseInfo",
    label: h("a", { href: `/course/${courseNumber}/info`, target: "_self" }, "课程信息"),
    title: "CourseInfo",
  },
  {
    key: "Students",
    label: h("a", { href: `/course/${courseNumber}/students`, target: "_self" }, "人员管理"),
    title: "Students",
  },
  {
    key: "knowledge",
    label: h("a", { href: `/course/${courseNumber}/knowledge`, target: "_self" }, "知识库管理"),
    title: "knowledge",
  },
  {
    key: "Agent",
    label: h("a", { href: `/course/${courseNumber}/agent`, target: "_self" }, "智能体设置"),
    title: "Agent",
  },
]);

// 使用 ref 创建一个 fileList，其类型为 FileItem 数组
// const fileList = ref([
//   {
//     uid: '1',
//     name: 'xxx.png',
//     status: 'done', // 使用类型断言来指定 status 的类型
//     url: 'http://www.baidu.com/xxx.png',
//   },
//   // ... 其他文件对象
// ]);


const fileList = ref([]);
const loading = ref(false);

async function fetchCourseKnowledge() {
  try {
    loading.value = true;
    const response = await api.getKnowledgeBaseFiles(courseNumber);
    console.log(response.data);
    
    if (Array.isArray(response.data)) {
      fileList.value = response.data.map(file => ({
        uid: file.file_created_time,
        name: file.file_name,
        status: 'done',
        url: file.file_url,
      }));
    } else {
      fileList.value = [];
    }
  } catch (error) {
    console.error("获取知识库文件失败", error);
    message.error("获取知识库文件失败");
    fileList.value = [];
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  fetchCourseKnowledge();
});



const uploadUrl = '/api/upload'; // 你的文件上传API端点

const uploadFile = async (file) => {
  try {
    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', file);

    // 设置请求头，告知服务器内容类型是 multipart/form-data
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };

    // 发送 POST 请求到服务器上传文件
    const response = await axios.post(uploadUrl, formData, config);
    
    // 上传成功后的操作，例如更新 fileList 状态
    const uploadedFile = {
      uid: Date.now().toString(), // 用时间戳作为唯一标识
      name: file.name,
      status: 'done',
      url: response.data.url, // 假设服务器响应中包含文件上传后的URL
    };
    fileList.value.push(uploadedFile);
    message.success(`${file.name} 上传成功`);
  } catch (error) {
    // 上传失败后的操作，例如更新 fileList 状态为 error
    const errorFile = fileList.value.find(item => item.uid === '1'); // 假设你想更新第一个文件的状态
    if (errorFile) {
      errorFile.status = 'error';
      errorFile.response = 'Server Error 500'; // 根据实际情况设置错误信息
    }
    message.error(`${file.name} 上传失败`);
  }
};


// 提示对话框
const Q1Note = () => {
  Modal.success({
    title: '什么是知识库？',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    okText: '了解了',
  });
};

const Q2Note = () => {
  Modal.success({
    title: '我的文件如何存储？',
    content: h('div', {}, [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    okText: '了解了',
  });
};

</script>

<style lang="scss" scoped>
.knowledge-container {
  min-width: 1366px;
  width:100vw;
  height: 100vh;
  display: flex;
  background: #F6F8F7;
}

.knowledge-LeftNav {
  box-sizing: border-box;
  width: 236px;
  height: 100%;
  flex-shrink: 0;
  display: inline-block;
  margin-left: 12px; 
  padding-top: 20px;
  justify-content: center; 
}
.knowledge-LeftNav-TopBar {
    width:236px;
    height: 40px;

    align-content: center;
    position: relative;
}
.knowledge-LeftNav-TopBar .ant-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(9, 9, 9, 0.06);

    display: inline-block;
    position: absolute;
    left: 0;
    top: 4px;
    
}
.knowledge-LeftNav-TopBar p {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 

    
    display: inline-block;
    position: absolute;
    left:84px;
    top: 12px;  
}
.knowledge-LeftNav-Management {
  width:230px;
  /*height: 900px; */
  height:auto; 
  margin-top: 28px;
    
}
.knowledge-LeftNav-Management-Title {
    overflow: hidden;
    color: var(--45, #8C8C8C);
    text-overflow: ellipsis;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
}

.knowledge-LeftNav-Management-Nav {
    width:220px;
    height:500px;
    margin-top: 4px;

    .ant-menu {
      background: #F6F8F7;
      border:0 !important;
    }
    :deep(.ant-menu-light .ant-menu-item-selected) {   
      border-radius: 12px;
      border: 1px solid #D9D9D9;
      background-color: #FFF !important;
      box-shadow: 0px 2px 2px 0px #F2F2F2, 0px 2px 2px 0px #F2F2F2;
    }
}

.knowledge-Content {
  display: flex;
  flex:1;
  flex-direction: column;
  /*width: 100%;*/
  height: calc(100% - 40px);
  margin-top: 20px;
  margin-bottom: 20px;

  border-radius: 12px;/*边框圆角*/
  border: 1px solid #EDEDED;
  background: #FFF;
  box-shadow: 0px 2px 2px 0px #F2F2F2;


  position: relative;
}

.knowledge-Upload .ant-btn {
    border-radius: 12px;
    background: #262626;
    width: 128px;
    height: 40px;
    position: absolute;
    top: 16px;
    left: 16px;
    &:hover {
      background-color: #484848; /* 悬浮时的背景颜色 */
      border-color: #484848;    /* 悬浮时的边框颜色 */
      box-shadow: 0 0 0 1px #262626; /* 悬浮时的边框阴影 */
    }
}
.knowledge-Q1 {
    margin-top: 16px;
    margin-left: 158px;
}
.knowledge-Q1 .ant-btn {
    border-radius: 12px;
    border:none;
    width: 128px;
    height: 40px;
}


.knowledge-File {
    width: 724px;
    height: auto;
    margin-left: 24px;
    margin-top: 16px;
    /*margin-right: 24px;*/
}

</style>